<template>

    <view class="topbar-content flex ai-c"
        :style="{ paddingTop: statusBarHeight + 'px', height: `${menuInfo.height}px` }">
        <view style="width: 100%;position: relative;">
            <view :style="{ width: '100%', position: 'absolute', top: '50%', left: '0', transform: 'translateY(-50%)' }"
                class="flex ai-c">
                <!-- <uni-icons type="left" size="24" style="margin-right: 20rpx;" color="#000" v-if="back"
                    @click="handleBack" class="flex ai-c"></uni-icons> -->
                <image src="/static/zuojianyoufanhui.png" @click="handleBack" v-if="back" mode="widthFix"
                    style="width: 52rpx;height: 52rpx;margin-right: 20rpx;"></image>
                <image v-if="isPerson && !back" :src="userStore.avatar" mode="heightFix" :style="{ height: `42rpx`, width: `42rpx` }"
                    class="logo cursor" :class="{ 'logo-clicked': isPressed }" @touchstart="handleTouchStart"
                    @touchend="handleTouchEnd" @touchcancel="handleTouchEnd"></image>
            </view>
            <slot name="center" style="width: 100%;"></slot>
            <slot name="left" style="width: 100%;"></slot>
        </view>

    </view>
    <!-- 个人中心 -->
    <personal-center ref="personalCenterRef" />
</template>

<script setup>
import personalCenter from '@/components/personal-center.vue'
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/index.js'
const userStore = useUserStore()
const props = defineProps({
    back: {
        type: Boolean,
        default: false
    },
    isPerson: {
        type: Boolean,
        default: true
    }
})
const personalCenterRef = ref(null)
const statusBarHeight = ref(0)
const isPressed = ref(false)
const menuInfo = ref({})

onMounted(() => {
    // 获取系统信息
    menuInfo.value = uni.getMenuButtonBoundingClientRect?.() || {}; // uni-app 兼容写法
    statusBarHeight.value = menuInfo.value.top || 0
})

const handleTouchStart = () => {
    isPressed.value = true
}

const handleTouchEnd = () => {
    isPressed.value = false
    personalCenterRef.value?.openPersonalCenter()
}

const handleBack = () => {
    uni.navigateBack()
}



</script>

<style lang="scss" scoped>
.topbar-content {
    padding: 0 32rpx;
    position: relative;
    .logo {
        transition: transform 0.2s ease;

        &.logo-clicked {
            transform: scale(1.2);
        }
    }
}
</style>